<template>
	<view class="page">
		<view v-for="(item,index) in list" :key="index" class="item-box">
			<view class="">考勤日期：{{item.create_time}}</view>
			<view style="margin: 30rpx 0;">考勤时间：{{item.time}} 
				<text v-if="order_class==1">天</text>
				<text v-else>{{hourly_wage_type==1?'小时':'/天'}}</text>
			</view>
			<view style="display: flex;">考勤照片：<image :src="item.image" @tap="zhanshi(item.image)" mode=""></image> </view>
		</view>
		<view class="prop-box" v-if="isShow">
			<view style="flex: 1;" @tap="isShow = false"></view>
			<image :src="url" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				order_id: '',
				cleaner_id: '',
				list: [],
				order_class: '',
				hourly_wage_type: '',
				isShow: false,
				url: ''
			}
		},
		onLoad(options) {
			this.cleaner_id = options.id
			this.order_id = options.order_id
			this.order_class = options.order_class
			this.hourly_wage_type = options.hourly_wage_type
			this.getList()
		},
		methods:{
			getList(){
				const params = {
					order_id: this.order_id,
					cleaner_id: this.cleaner_id,
				}
				this.$http.post('/index/Hotelorder/order_attendance_list', params).then(res => {
					this.list = res
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			},
			zhanshi(url){
				this.url = url
				this.isShow = true
			}
		}
	}
</script>

<style lang="less">
	.page{
		background-color: #fff;
		overflow-y: auto;
		height: 100vh;
	}
	.item-box{
		padding: 30rpx 0;
		width: 690rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #3D3D3D;
		border-bottom: 2rpx solid #C8C8C8;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 13rpx;
		}
	}
	.prop-box{
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		top: 0;
		left: 0;
		z-index: 222;
		image{
			width: 500rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			z-index: 332;
		}
	}
</style>